<template>
  <view class="my-orders">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <image class="back-icon" src="/static/back.png" @click="goBack"></image>
    </view>
    <!-- 标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="switchTab(0)"
      >
        全部
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="switchTab(1)"
      >
        待支付
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 2 }" 
        @click="switchTab(2)"
      >
        待使用
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 3 }" 
        @click="switchTab(3)"
      >
        待评价
      </view>
    </view>
	<view class="c1"></view>
    <!-- 订单列表 -->
    <view class="order-list">
      <!-- 订单1 -->
      <view class="order-item">
        <view class="order-header">
          <text class="order-id">订单编号:24255252522</text>
          <image class="arrow" src="/static/right-arrow.png"></image>
        </view>
        <view class="order-info">
          <text>服务项目：车辆保养</text>
          <text>服务门店：大宝车辆维修店 <image class="store-arrow" src="@/img/车联网服务-08我的-01我的订单-09详情 - 已取消订单_slices/plane@2x.png"></image></text>
          <text>下单时间：2023-03-12 12:09</text>
          <text class="status待评价">待评价</text>
        </view>
        <view class="order-actions">
          <text class="price">实付：230.56元</text>
          <button class="btn evaluate-btn">立即评价</button>
          <button class="btn repeat-btn">再来一单</button>
        </view>
      </view>
      <!-- 订单2 -->
      <view class="order-item">
        <view class="order-header">
          <text class="order-id">订单编号:24255252522</text>
          <image class="arrow" src="@/img/车联网服务-08我的-01我的订单-09详情 - 已取消订单_slices/plane@2x.png"></image>
        </view>
        <view class="order-info">
          <text>服务项目：车辆保养</text>
          <text>服务门店：大宝车辆维修店 <image class="store-arrow" @/img/车联网服务-08我的-01我的订单-09详情 - 已取消订单_slices/plane@2x.png"></image></text>
          <text>下单时间：2023-03-12 12:09</text>
          <text class="status已取消">已取消</text>
        </view>
        <view class="order-actions">
          <text class="price">应付：230.56元</text>
          <button class="btn reorder-btn">重新下单</button>
        </view>
      </view>
      <!-- 订单3 -->
      <view class="order-item">
        <view class="order-header">
          <text class="order-id">订单编号:24255252522</text>
          <image class="arrow" src="@/img/车联网服务-08我的-01我的订单-09详情 - 已取消订单_slices/plane@2x.png"></image>
        </view>
        <view class="order-info">
          <text>服务项目：车辆保养</text>
          <text>服务门店：大宝车辆维修店 <image class="store-arrow" src="@/img/车联网服务-08我的-01我的订单-09详情 - 已取消订单_slices/plane@2x.png"></image></text>
          <text>下单时间：2023-03-12 12:09</text>
          <text class="status已退款">已退款</text>
        </view>
        <view class="order-actions">
          <text class="price">实付：230.56元</text>
          <button class="btn repeat-btn">再来一单</button>
        </view>
      </view>
      <!-- 订单4 -->
      <view class="order-item">
        <view class="order-header">
          <text class="order-id">订单编号:24255252522</text>
          <image class="arrow" src="@/img/车联网服务-08我的-01我的订单-09详情 - 已取消订单_slices/plane@2x.png"></image>
        </view>
        <view class="order-info">
          <text>服务项目：车辆保养</text>
          <text>服务门店：大宝车辆维修店 <image class="store-arrow" src="@/img/车联网服务-08我的-01我的订单-09详情 - 已取消订单_slices/plane@2x.png"></image></text>
          <text>下单时间：2023-03-12 12:09</text>
          <text class="status已完成">已完成</text>
        </view>
        <view class="order-actions">
          <text class="price">实付：230.56元</text>
          <button class="btn repeat-btn">再来一单</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的标签，0:全部，1:待支付，2:待使用，3:待评价
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
    goBack() {
      // 返回上一页逻辑，可使用uniapp的导航API，如uni.navigateBack
    }
  }
};
</script>

<style scoped>
	.c1{
		background-color: #4995fe;
		height: 50px;
	}
/* 页面整体样式 */
.my-orders {
  background-color: #f5f5f5;
  min-height: 100vh;
}
/* 顶部导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 0px;
  padding: 0 15px;
}
.back-icon {
  width: 20px;
  height: 20px;
}
.title {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
/* 标签栏样式（仅修改背景色和文字颜色，其他保持不变） */
.tab-bar {
  display: flex;
  background-color: #3399ff; /* 与导航栏同色 */

}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  color: #fff; /* 文字改为白色 */
}
.tab-item.active {
  color: #fff; /* 活跃状态文字保持白色 */
  border-bottom: 2px solid #fff; /* 活跃下划线改为白色 */
}
/* 订单列表样式（完全未修改） */
.order-list {
  padding: 10px;
  margin-top: -50px;
}
.order-item {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px;
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.order-id {
  font-size: 14px;
  color: #333;
}
.arrow {
  width: 20px;
  height: 20px;
}
/* 订单信息样式（完全未修改） */
.order-info {
  margin-bottom: 10px;
  line-height: 1.6;
  font-size: 14px;
  color: #666;
}
.store-arrow {
  width: 16px;
  height: 16px;
  margin-left: 5px;
}
.status待评价 {
  color: #007aff;
  margin-left: 5px;
}
.status已取消 {
  color: #999;
  margin-left: 5px;
}
.status已退款 {
  color: #f00;
  margin-left: 5px;
}
.status已完成 {
  color: #007aff;
  margin-left: 5px;
}
/* 订单操作样式（调整按钮样式） */
.order-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-size: 14px;
  color: #f00;
}
.btn {
  padding: 4px 10px; /* 缩小按钮大小 */
  border-radius: 20rpx; /* 增大圆角更圆润 */
  font-size: 12px; /* 缩小文字 */
  margin-left: 8px; /* 调整间距 */
}
/* 立即评价按钮 */
.evaluate-btn {
  background-color: #eee;
  color: #999;
  border: 1px solid #eee;
  margin-right: auto; /* 让评价按钮靠左，为再来一单按钮让位 */
}
/* 再来一单按钮（固定在最右侧） */
.repeat-btn {
  background-color: #007aff;
  color: #fff;
  border: 1px solid #007aff;
  margin-left: 8px;
  margin-right: 0; /* 移除右侧间距 */
}
/* 重新下单按钮同步样式 */
.reorder-btn {
  background-color: #007aff;
  color: #fff;
  border: 1px solid #007aff;
  padding: 4px 10px;
  border-radius: 20rpx;
  font-size: 12px;
  margin-left: auto; /* 靠右显示 */
  margin-right: 0;
}
</style>